<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first" stretch="true">
        <span slot="label">
          <span class="span-box">
            <span>日常工作</span>
            <el-tooltip class="item" effect="dark" placement="bottom-start">
              <div slot="content">
                <div class="total">总数：{{ this.processTotal }}</div>
                <div class="info">
                  <span class="info-label completed"
                    >已完成：{{ this.processCompleted }}</span
                  >
                  <span class="info-label notCompleted"
                    >未完成：{{ this.processNotCompleted }}</span
                  >
                </div>
                <div class="detail">
                  <span class="detail-label doing"
                    >进行中：{{ this.processDoing }}</span
                  >
                  <span class="detail-label checking"
                    >审核中：{{ this.processChecking }}</span
                  >
                  <span class="detail-label back"
                    >退回：{{ this.processReturn }}</span
                  >
                  <span class="detail-label back"
                    >拒绝：{{ this.processRejected }}</span
                  >
                  <span class="detail-label back">作废：{{ this.processVoid }}</span>
                </div>
              </div>

              <span class="btn-bell-badge">
                <span id="processDoingNum" class="num">{{
                  this.processNotCompleted
                }}</span>
              </span>
            </el-tooltip>
          </span>
        </span>
        <child1 :queryWorkParam="queryWorkParam"></child1>
      </el-tab-pane>
      <el-tab-pane name="second" v-if="false">
        <span slot="label">
          <span class="span-box">
            <span>项目工作</span>
            <el-tooltip class="item" effect="dark" placement="bottom-start">
              <div slot="content">
                <div class="total">总数：{{ this.projectTotal }}</div>
                <div class="info">
                  <span class="info-label completed"
                    >已完成：{{ this.projectCompleted }}</span
                  >
                  <span class="info-label notCompleted"
                    >未完成：{{ this.projectNotCompleted }}</span
                  >
                </div>
                <div class="detail">
                  <span class="detail-label doing"
                    >进行中：{{ this.projectDoing }}</span
                  >
                  <span class="detail-label checking"
                    >审核中：{{ this.projectChecking }}</span
                  >
                  <span class="detail-label back"
                    >退回：{{ this.projectReturn }}</span
                  >
                  <span class="detail-label back"
                    >拒绝：{{ this.projectRejected }}</span
                  >
                  <span class="detail-label back">作废：{{ this.projectVoid }}</span>
                </div>
              </div>
              <span class="btn-bell-badge">
                <span id="prjectDoingNum" class="num">{{
                  this.projectNotCompleted
                }}</span>
              </span>
            </el-tooltip>
          </span>
        </span>
        <!-- <child2 :queryWorkParam="queryWorkParam"></child2> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabZujianChild1 from "../quality/index-process";
import tabZujianChild2 from "../work/index-project";
import { qualityStatistics } from "@/api/statistics/work/work.js";

export default {
  components: {
    child1: tabZujianChild1,
    child2: tabZujianChild2
  },
  data() {
    return {
      activeName: "first",
      processTotal: 0,
      processNotCompleted: 0,
      processCompleted: 0,
      processDoing: 0,
      processChecking: 0,
      processReturn: 0,
      processRejected: 0,
      processVoid: 0,
      projectTotal: 0,
      projectNotCompleted: 0,
      projectCompleted: 0,
      projectDoing: 0,
      projectChecking: 0,
      projectReturn: 0,
      projectRejected: 0,
      projectVoid: 0,
      queryWorkParam:{}
    };
  },
  props:{
    queryDetailParam: {
      type: Object,
      required: false
    }
  },
  created() {
    // console.log("父节点传递的参数"+JSON.stringify(this.queryDetailParam));
    this.queryWorkParam = this.queryDetailParam;
    this.getWaitWorkStatistics();
  },
  methods: {
    handleClick(tab, event) {
      if (tab.label == "日常工作") {
        console.log("日常工作");
      } else if (tab.label == "项目工作") {
        console.log("项目工作");
      }
    },
    getWaitWorkStatistics() {
      // console.log("统计参数："+JSON.stringify(this.queryDetailParam));
      qualityStatistics(this.queryDetailParam).then(response => {
        this.processTotal = response.data.processTotal;
        this.processNotCompleted = response.data.processNotCompleted;
        this.processCompleted = response.data.processCompleted;
        this.processDoing = response.data.processDoing;
        this.processChecking = response.data.processChecking;
        this.processReturn = response.data.processReturn;
        this.processRejected = response.data.processRejected;
        this.processVoid = response.data.processVoid;
        this.projectTotal = response.data.projectTotal;
        this.projectNotCompleted = response.data.projectNotCompleted;
        this.projectCompleted = response.data.projectCompleted;
        this.projectDoing = response.data.projectDoing;
        this.projectChecking = response.data.projectChecking;
        this.projectReturn = response.data.projectReturn;
        this.projectRejected = response.data.projectRejected;
        this.projectVoid = response.data.projectVoid;
      });
    }
  }
};
</script>

<style>
.span-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.span-box .btn-bell-badge {
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  line-height: 18px;
  border-radius: 15px;
  background: #f56c6c;
}
.span-box .btn-bell-badge .num {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.total,
.info,
.detail {
  text-align: center;
  margin: 5px;;
}
.total , .info-label, .detail-label {
  padding: 0 5px;
}
.total {
  color: rgb(110, 71, 250);
}
.notCompleted {
  color: rgb(255, 208, 0);
}
.completed {
  color: rgb(0, 255, 42);
}
.doing {
  color: rgb(52, 197, 255);
}
.checking {
  color: rgb(52, 255, 187);
}
.back {
  color: rgb(243, 59, 59);
}
</style>
